<template>
  <div class="home-container">
    <div class="article-list">
      <el-row :gutter="10" v-if="blogList && blogList.length">
        <el-col :span="8" v-for="(item, index) of blogList" :key="index">
          <blog-item :blog-item="item" />
        </el-col>
      </el-row>
      <div v-else class="content-null">- 暂时没有博客啦 -</div>
    </div>

    <div class="descriptions">
      <description />
      <page-footer />
    </div>
  </div>
</template>

<script>
import API from '~/interface/Word';
import BlogItem from '~/components/index/BlogItem'
import Description from '~/components/index/Description'
import PageFooter from '~/components/public/Footer'
export default {
  components: {
    BlogItem,
    Description,
    PageFooter,
  },

  data() {
    return {
      blogList: []
    }
  },

  async created() {
    await this.getWordList();
  },

  methods: {
    getWordList() {
      API.getWordList({ page: 1, size: 20, getCache: false }).then(res => {
        if (res && res.list) {
          this.blogList = res.list;
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  position: relative;
  width: 100%;

  .article-list {
    width: calc(80% - 10px);
  }

  .descriptions {
    position: absolute;
    right: 0;
    top: 0;
    width: 20%;
    height: 100%;
  }
}
</style>
